<template>
	<a-card :bordered="false">
		<!-- 查询区域 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
				<a-row :gutter="24">
					<template>
						<a-col :md="6" :sm="8">
							<a-form-item label="摄像机名称">
								<a-input placeholder="请输入摄像机名称查询" v-model="queryParam.name"></a-input>
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="8">
							<a-form-item label="是否在线:">
								<a-select placeholder="请选择是否在线" showSearch showArrow optionFilterProp="children"
									:getPopupContainer="(node) => node.parentNode" :defaultActiveFirstOption="false"
									v-model="queryParam.online">
									<a-select-option value="1">是</a-select-option>
									<a-select-option value="0">否</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
					</template>

					<a-col :md="6" :sm="8">
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
							<a-button type="primary" @click="resetParam" icon="reload" style="margin-left: 8px">重置
							</a-button>
						</span>
					</a-col>

				</a-row>
			</a-form>
		</div>
		
		<!-- 操作按钮区域 -->
		<div class="table-operator" style="border-top: 5px">
			<a-dropdown v-if="selectedRowKeys.length > 0">
				<a-menu slot="overlay" @click="handleMenuClick">
					<a-menu-item key="2">
						<a-icon type="setting"/>
						<span>批量启用</span>
					</a-menu-item>
					<a-menu-item key="3">
						<a-icon type="setting"/>
						<span>批量停用</span>
					</a-menu-item>
				</a-menu>
				<a-button style="margin-left: 8px">
					批量操作
					<a-icon type="down" />
				</a-button>
			</a-dropdown>
		</div>

		<!-- table区域-begin -->
		<div>
			<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
				<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
					style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
				<a style="margin-left: 24px" @click="onClearSelected">清空</a>
			</div>
			
			<a-table ref="table" bordered size="middle" rowKey="cameraId" :columns="columns" :dataSource="dataSource"
				:pagination="ipagination" :loading="loading"
				:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
				@change="handleTableChange">

				<span slot="action" slot-scope="text, record">
					<a @click="editCamera(record)">编辑</a>
					<a-divider type="vertical" />
					<a href="javascript:;" @click="cameraDetail(record)">详情</a>
					<a-divider type="vertical" />
					<a-popconfirm title="确定此操作吗?" @confirm="() => changeStatus(record)">
						<a>{{ record.used==='1'?'停用':"启用"}}</a>
					</a-popconfirm>

				</span>
			</a-table>
		</div>
		<camera-edit-modal ref="cameraeditmodal" @ok="editModalOk"></camera-edit-modal>
		<camera-tbd-edit-modal ref="cameratbdeditmodal" :forms = 'this.forms' :cameraId="this.cameraId"  @ok="editModalOk"></camera-tbd-edit-modal>
	</a-card>
</template>

<script>
	import CameraEditModal from './modules/CameraEditModal'
	import CameraTbdEditModal from './modules/CameraTbdEditModal'
	import {
		JeecgListMixin
	} from '@/mixins/JeecgListMixin'
	import {
		postAction
	} from '@/api/manage'
	import { devList,cameraEdit } from '@/api/api'
	export default {
		name: "CameraList",
		mixins: [JeecgListMixin],
		components: {
			CameraEditModal,
			CameraTbdEditModal
		},
		data() {
			return {
				description: '这是摄像机管理页面',
				queryParam: {
					devId: this.$route.params.devId,
					name: undefined,
					online: undefined
				},
				forms: {
					package_format: '',
					v_encode: '',
					v_framerate: '',
					v_bitrate: '',
					v_width: '',
					v_height: '',
					a_encode: '',
					a_samplerate: '',
					a_bitrate:'',
					profile:'',
					rc_mode:''
				},
				columns: [{
						title: '摄像机名称',
						align: "center",
						dataIndex: 'name',
						width: 60
					},
					{
						title: '所属设备',
						align: "center",
						dataIndex: 'devName',
						width: 50
					},
					{
						title: '所属设备编号',
						align: "center",
						dataIndex: 'devCode',
						width: 80
					},
					{
						title: '摄像机地点',
						align: "center",
						width: 60,
						dataIndex: 'location',
					},
					{
						title: '是否有云台',
						align: "center",
						width: 60,
						dataIndex: 'hasPtz',
						customRender: function(text) {
							if (text === '1') {
								return "有"
							} else if (text === '0') {
								return "无"
							}
						}
					},
					{
						title: '状态',
						align: "center",
						width: 60,
						dataIndex: 'state',
						customRender: function(text) {
							if (text === '1') {
								return "在线"
							} else if (text === '2') {
								return "离线"
							} else if(text === '3'){
								return "禁用"
							}
						}
					},
					{
						title: '摄像机描述',
						align: "center",
						width: 60,
						dataIndex: 'cameraDesc',
					},
					{
						title: '操作',
						dataIndex: 'action',
						scopedSlots: {
							customRender: 'action'
						},
						align: "center",
						width: 90
					}
				],
				url: {
					list: "/dev/camera/page",
					usedBatch: "/dev/camera/setused-batch"
				},
			}
		},
		created() {},
		watch: { // 如果路由发生变化，再次执行该方法
			'$route'(to, from) {
				if (to.path == '/dev/camera') {
					this.queryParam.devId = this.$route.params.devId;
					this.loadData();
				}
			}
		},
		methods: {
			handleMenuClick(e) {
				if(e.key == 2){
					this.batchOpt(this.url.usedBatch, "1");
				}else if(e.key == 3){
					this.batchOpt(this.url.usedBatch, "0");
				}
			},
			editCamera(record) {
				// console.log(this.cameraId);
				console.log(record);
				if(record.devModel === "TPD-8CH-4436" || record.devModel === "FY-X10D-3538"){
					const params ={
						cameraId:record.cameraId
					}
					cameraEdit(params).then((res) => {
						console.log(res);
						this.cameraId = record.cameraId;
						this.forms = res.data;
						this.forms.package_format = res.data.package_format;
						this.forms.v_encode = res.data.v_encode;
						this.forms.v_framerate = res.data.v_framerate.defaultValue;
						this.forms.v_bitrate = res.data.v_bitrate.defaultValue;
						this.forms.a_encode = res.data.a_encode;
						this.forms.a_bitrate = res.data.a_bitrate.defaultValue;
						this.forms.profile = res.data.profile;
						this.forms.rc_mode = res.data.rc_mode;
						console.log(this.forms);
					})
					console.log(111)
					this.$refs.cameratbdeditmodal.show(record);
					this.$refs.cameratbdeditmodal.disableSubmit = false;
				}
				else {
					this.$refs.cameraeditmodal.show(record);
					console.log(this.$refs.cameraeditmodal.show(record))
					this.$refs.cameraeditmodal.disableSubmit = false;
				}
			},
			editModalOk() {
				// 修改 成功时，重载列表
				this.loadData();
			},
			cameraDetail: function(record) {
				if(record.devModel === "TPD-8CH-4436" || record.devModel === "FY-X10D-3538") {
					this.$refs.cameratbdeditmodal.show(record);
					this.$refs.cameratbdeditmodal.title = "详情";
					this.$refs.cameratbdeditmodal.disableSubmit = false;
				} else {
					this.$refs.cameraeditmodal.show(record);
					this.$refs.cameraeditmodal.title = "详情";
					this.$refs.cameraeditmodal.disableSubmit = true;
				}
			},
			changeStatus(record) {
				let objTemp = {}
				objTemp.used = (record.used == 0) ? 1 : 0
				objTemp.cameraId = record.cameraId
				postAction("/dev/camera/set-used", objTemp).then(res => {
					if (res.code == '00000') {
						this.$message.success("修改成功")
						this.loadData()
					} else {
						this.$message.warning("修改失败:" + res.msg)
					}
				})
			},
			resetParam() {
				this.queryParam.name = undefined
				this.queryParam.online = undefined
				this.loadData(1)
			}
		}
	}
</script>
<style scoped>
	@import '~@assets/less/common.less'
</style>
